<template>
  <div class="login-box">
    <div class="login-page-container">
      <el-form
        :model="ruleForm2"
        :rules="rules2"
        ref="ruleForm2"
        label-position="left"
        label-width="0px"
        class="demo-ruleForm login-container"
      >
        <h3 class="title">系统登录</h3>
        <el-form-item prop="account">
          <el-input type="text" v-model="ruleForm2.account" placeholder="请输出账号"></el-input>
        </el-form-item>
        <el-form-item prop="checkPass">
          <el-input type="password" v-model="ruleForm2.checkPass" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-checkbox click="remberuser" v-model="checked" checked class="remember">记住密码</el-checkbox>
        <span class="logon-css" @click="onlogon">注册账号</span>
        <el-form-item style="width:100%;">
          <el-button type="primary" style="width:100%;" @click="login" :loading="logining">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import * as commonApi from "api/common";
import * as types from "../store/mutation-types";
import axios from "axios";
import html from '../api/src'

export default {
  props: {},
  data() {
    return {
      logining: false,
      ruleForm2: {
        account: "",
        checkPass: ""
      },
      checked: true
    };
  },
  created() {
    console.log(a.domain)
  },
  methods: {
    onlogon () {
      this.$router.push({ path: '/logon' })
    },
    login() {
     if(this.ruleForm2.account !== "" && this.ruleForm2.checkPass !== ""){
       axios({
         method: "post",
         url: html.domain + 'users/login/',
         data:{
           username: this.ruleForm2.account,
           password: this.ruleForm2.checkPass,
         }
       })
       .then((res) => {
         console.log(res.data);
         localStorage.setItem('indexUrl',res.data.token);
         localStorage.setItem('username',res.data.username)
         localStorage.setItem('id',res.data.id)
         this.$router.push({ path: '/menu1/sub1' })
       })
      //  .catch((error) => {
      //    this.$message.error('该用户尚未注册')
      //    console.log(error);
      //  })
     }
    },
    ...mapMutations({
      setUsername: types.SET_USERNAME,
      setPassword: types.SET_PASSWORD,
      setTreeData: types.SET_TREEDTA,
      setToken: types.SET_TOKEN
    })
  },
};
</script>

<style lang="scss">
@import "../assets/css/them.scss";
.login-box {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background-color: $globalBgColor;
}
.login-container {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  background-clip: padding-box;
  margin: 180px auto;
  width: 350px;
  padding: 35px 35px 15px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}

label.el-checkbox.remember {
  margin: 0px 0px 35px 0px;
}
.logon-css{
  float: right;
  font-family: Microsoft YaHei;
  color: #909399;
}
</style>